<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./增删查改.css">
    <script src="./js/jquery-1.12.4.js"></script>
    <title>Document</title>
    <!-- <script>$(document).ready(function () { });</script> -->
</head>

<body>
    <div class="box">
        <ul>
            <li>姓名</li>
            <li>年龄</li>
            <li>性别</li>
            <li>电话</li>
            <li>操作</li>
        </ul>
    </div>
    <div class="box_2">
        <ul id="add" class="add">
            <li>张三</li>
            <li>18</li>
            <li><select id="">
                    <option value="0">男</option>
                    <option value="1">女</option>
                </select></li>
            <li>17795877566</li>
            <li>
                <button id="shit">删除</button>
                <button id="addend">修改</button>
            </li>

        </ul>

    </div>
    <div class="l_1" id="cen">

    </div>
    <button id="but">增加</button>
    <div class="box_3">
        <div class="box_4" id="box__4">
            <ul>
                <li>姓名：<input type="text" id="bname">
                    <span class="b_ts1" id="name_ts"></span>
                </li>
                <li> 年龄：<input type="text" id="bage">
                    <span class="b_ts2" id="age_ts"></span>
                </li>
                <li> 性别：<select class="bsex" id="bsex">
                        <option value="0">男</option>
                        <option value="1">女</option>
                    </select>
                    <span class="b_ts3" id="sex_ts"></span>
                </li>
                <li> 电话：<input type="text" id="bphoe">
                    <span class="b_ts4" id="phoe_ts"></span>
                </li>

                <div class="tjj"><a href="javascript:void(0)" id="tjjover">完成</a></div>
            </ul>

        </div>
    </div>

    <script>
        var sty = [];      //主样式nnnn
        function data() {
            var box_2 = document.getElementsByClassName("box_2")
            var asd = "";
            for (i = 0; i < sty.length; i++) {
                if(sty[i].scbj==0){
                   asd += '<ul><li>' + sty[i].name + '</li><li>' + sty[i].age + '</li><li>' + getsex(sty[i].sex) + '</li><li>' + sty[i].phoe + '</li><li><button  onclick="shit(this,'+i+')" >删除</button><button>修改</button></li></ul>'}
                
            }
            document.getElementById("cen").innerHTML = asd;
        }
        data()    //渲染视图
        function getsex(num) {
            return num ? "女" : "男"
        }
        document.getElementById("but").onclick = function () {
            document.getElementsByClassName("box_3")[0].style.display = "block"
        }
        document.getElementsByClassName("tjj")[0].onclick = function () {
            document.getElementsByClassName("box_3")[0].style.display = "none"
        }



        var add_obj = {};
        var aname = /^[\u4e00-\u9fa5]{2,4}$/;
        var aage = /^(([0-9]|[1-9][1-9]|1[0-7][0-9])(\\.[0-9]+)?|180)$/;
        var aphoe = /^1[35789]\d{9}$/;
        var name_ts = document.getElementById('name_ts');
        var bname = document.getElementById("bname");
        bname.onfocus = function () {
            name_ts.innerHTML = "请输入您的姓名";
            name_ts.style.display = "block";
            name_ts.style.color = "blue";
        }
        // 失焦
        bname.onblur = function () {
            if (aname.test(bname.value)) {
                name_ts.innerHTML = "该姓名可以使用";
                name_ts.style.display = "block";
                name_ts.style.color = "blue";
                add_obj.name = bname.value;


            } else {
                name_ts.innerHTML = "请输入2-4位的用户名";
                name_ts.style.color = "red";
            }
        }



        document.getElementById("bage").onfocus = function () {
            var age_ts = document.getElementById('age_ts')
            age_ts.innerHTML = "请输入您的年龄";
            age_ts.style.display = "block";
            age_ts.style.color = "blue";
        }


        bage.onblur = function () {
            if (aage.test(bage.value)) {
                age_ts.innerHTML = "输入成功";
                age_ts.style.display = "block";
                age_ts.style.color = "blue";
                add_obj.age = bage.value;
            } else {
                age_ts.innerHTML = "请输入正确的年龄";

                age_ts.style.color = "red";
            }
        }



        var bphoe = document.getElementById("bphoe");
        document.getElementById("bphoe").onfocus = function () {

            var phoe_ts = document.getElementById('phoe_ts')
            phoe_ts.innerHTML = "请输入输入11位电话号码";
            phoe_ts.style.display = "block";
            phoe_ts.style.color = "blue";

        }
        bphoe.onblur = function () {

            if (aphoe.test(bphoe.value)) {

                phoe_ts.innerHTML = "电话号码可用";
                phoe_ts.style.display = "block";
                phoe_ts.style.color = "blue";
                add_obj.phoe = bphoe.value;

            } else {

                phoe_ts.innerHTML = "请输入正确的电话号码";
                phoe_ts.style.color = "red";
            }
        }


        //  增加新对象
        document.getElementById("tjjover").onclick = function () {
            var obj = {};
            for (var key in add_obj) {
                console.log(66)
                obj[key] = add_obj[key];
            }
            obj.sex = document.getElementById("bsex").value;
            obj.id = sty.length;
            if (obj.name && obj.age && obj.phoe) {
                console.log(55)
                obj.scbj=0;
                sty.push(obj);
                data()
            }

        }
        //删除已有对象
        function shit(a,b) {
            console.log(a)
            a.parentNode.parentNode.remove();
            sty[b].scbj=1;
               }
    </script>
</body>

</html>